<script setup lang="ts">
import { get, loadFile, message, post } from '@/utils'
import { Market } from '@/enum/market'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
import SetEditorModal from './components/SetEditorModal.vue'
import isEmpty from 'lodash/isEmpty'
import SetGoodsMarketPrice from '@/views/market/components/SetGoodsMarketPrice.vue'
const { store } = useModal()
const { store: editorStore } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({
  type: Market.限时折扣,
})

const formRef = ref()
const actionRef = ref()
const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const info = ref<any>({})
const getInfo = () => {
  return new Promise((resolve, reject) => {
    get({ url: '/server-shop/sys-seller/pattern/info' }, ({ data }) => {
      info.value = data
      resolve({})
    })
  })
}
const request = (params: any, sort?, filters?): Promise<any> => {
  return new Promise(async (resolve, reject) => {
    if (isEmpty(info.value)) await getInfo()
    get(
      {
        url: '/server-shop/sys-seller/pattern/goods/page',
        data: { size: params.pageSize, ...params, patternId: info.value.id },
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}

const columns = formatColumns([
  { title: '商品图片', dataIndex: 'goodsImg', width: 90, valueType: 'image' },
  {
    title: '商品名称',
    dataIndex: 'goodsName',
    width: 90,
    hideInSearch: false,
  },

  {
    title: '商品价',
    dataIndex: 'goodsPrice',
    width: 100,
    valueType: 'money',
  },
  { title: '销量', dataIndex: 'goodsSalesVolume', width: 90, sorter: true },
  { title: '库存', dataIndex: 'goodsStock', width: 90 },

  { title: '创建时间', dataIndex: 'createTime', width: 200 },
  {
    title: '操作',
    dataIndex: 'op',
    width: 130,
    fixed: 'right',
    btnList: [
      {
        name: '编辑',
        handle: ({ record }) => {
          store.handleShow(record)
        },
      },
      {
        name: '移除',
        type: 'popconfirm',
        tip: '确认移除该商品吗?',
        handle: ({ record }) => {
          post({ url: '/server-shop/sys-seller/pattern/goods/remove?ids=' + record.id }, ({ code, msg }) => {
            if (code == 200) actionRef.value.reload()
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
          })
        },
      },
    ],
  },
])
</script>

<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :scroll="{ x: 1000 }" :pagination="pagination" header-title=" " column-resizable :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #tool-bar>
        <a-button type="primary" class="mb10" @click="editorStore.handleShow({})">
          <template #icon>
            <icon-code-square />
          </template>
          分销规则
        </a-button>
        <a-button
          type="primary"
          class="mb10"
          @click="
            $router.push({
              name: 'marketDistributesProductList',
              query: {
                publicityId: info.id,
              },
            })
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          添加分销商品
        </a-button>
      </template>
    </ProTable>
    <SetGoodsMarketPrice v-if="store.show" v-model:show="store.show" :id="store.id" :goodsId="store.info.goodsId" :public-id="info.id" />
    <SetEditorModal v-if="editorStore.show" v-model:show="editorStore.show" :info="info" @confirm="getInfo" />
  </div>
</template>
